<template>
    <div>
        <div style="margin-bottom: 30px">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>新闻后台管理</el-breadcrumb-item>
                <el-breadcrumb-item>新闻编辑</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-form :model="formData" ref="vForm" :rules="rules" label-position="left" label-width="80px" size="medium"
                 @submit.native.prevent>
            <el-form-item label="新闻标题" prop="newtitle" class="required">
                <el-input v-model="formData.newtitle" type="text" placeholder="请输入新闻标题" clearable></el-input>


            </el-form-item>
            <el-form-item label="新闻分类" prop="newclass" class="required">
                <el-select v-model="formData.newclass" class="full-width-input" clearable placeholder="请选择新闻分类">
                    <el-option v-for="(item, index) in newclass" :key="index" :label="item.label"
                               :value="item.label" :disabled="item.disabled"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="发表媒体" prop="newauthor" class="required">
                <el-input v-model="formData.newauthor" type="text" placeholder="请输入发表媒体" clearable></el-input>
            </el-form-item>
            <el-form-item label="新闻内容" prop="newcontent" class="required">
                <!--        <el-input type="textarea" v-model="formData.newcontent" placeholder="请输入新闻内容" rows="12"></el-input>-->
                <quill-editor v-model="formData.newcontent"></quill-editor>
            </el-form-item>
            <br>
            <el-form-item label="是否热门">
                <el-switch
                        v-model="formData.ishot"
                >
                </el-switch>
            </el-form-item>
            <el-form-item label="新闻封面" prop="newimg" class="required">
                <el-upload
                        class="avatar-uploader"
                        action="http://localhost:8082/file/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                >
                    <img v-if="formData.newimg" :src="formData.newimg" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>

            <div class="static-content-item">
                <div class="button-70" type="primary" @click="submitForm">提交新闻</div>
            </div>
        </el-form>


    </div>

</template>

<script>
import {getCategoryList} from '@/api/Category'
import {addOrUpdateNews} from '@/api/News'

export default {
    components: {},
    props: {},
    data() {
        return {
            formData: {
                newtitle: "",
                newclass: '推荐',
                newcontent: "",
                ishot: false,
                isrelease: false,
                newimg: '',
            },
            rules: {
                newtitle: [{
                    required: true,
                    message: '新闻标题不能为空',
                }],
                newauthor: [{
                    required: true,
                    message: '新闻机构不能为空',
                }],
                newclass: [{
                    required: true,
                    message: '新闻类别不能为空',
                }],
                newcontent: [{
                    required: true,
                    message: '新闻内容不能为空',
                }],
                newimg: [{
                    required: true,
                    message: '新闻封面不能为空',
                }],
            },
            newclass: [{
                "label": "推荐",
                "value": 1
            }, {
                "label": "健康",
                "value": "2"
            }, {
                "label": "学习",
                "value": 3
            }],
        }
    },
    computed: {},
    watch: {},
    created() {
        this.getNewclass();
    },
    mounted() {
    },
    methods: {
        getNewclass() {
            getCategoryList().then((res) => {
                console.log(res);
                this.newclass = res;
            });
        },
        handleAvatarSuccess(res) {
            this.formData.newimg = res
        },
        submitForm() {
            this.$refs['vForm'].validate(valid => {
                if (!valid) return
                //TODO: 提交表单
                addOrUpdateNews(this.formData).then((res) => {
                    if (res) {
                        this.$message.success("提交成功");
                        this.resetForm()
                    } else {
                        this.$message.error("提交失败");
                    }
                });
            })
        },
        resetForm() {
            this.$refs['vForm'].resetFields()
        }
    }
}

</script>

<style lang="scss">
::v-deep .ql-editor {
  min-height: 300px;
}

.el-input-number.full-width-input,
.el-cascader.full-width-input {
  width: 100% !important;
}

.el-form-item--medium {
  .el-radio {
    line-height: 36px !important;
  }

  .el-rate {
    margin-top: 8px;
  }
}

.el-form-item--small {
  .el-radio {
    line-height: 32px !important;
  }

  .el-rate {
    margin-top: 6px;
  }
}

.el-form-item--mini {
  .el-radio {
    line-height: 28px !important;
  }

  .el-rate {
    margin-top: 4px;
  }
}

.clear-fix:before,
.clear-fix:after {
  display: table;
  content: "";
}

.clear-fix:after {
  clear: both;
}

.float-right {
  float: right;
}

</style>

<style lang="scss" scoped>
div.table-container {
  table.table-layout {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;

    td.table-cell {
      display: table-cell;
      height: 36px;
      border: 1px solid #e1e2e3;
    }
  }
}

div.tab-container {
}

.label-left-align ::v-deep .el-form-item__label {
  text-align: left;
}

.label-center-align ::v-deep .el-form-item__label {
  text-align: center;
}

.label-right-align ::v-deep .el-form-item__label {
  text-align: right;
}

.custom-label {
}

.static-content-item {
  margin: 20px;
  min-height: 20px;
  display: flex;
  align-items: center;

  ::v-deep .el-divider--horizontal {
    margin: 0;
  }
}

.avatar-uploader {
  width: 240px;
  height: 140px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 138px;
  height: 138px;
  line-height: 138px;
  text-align: center;
}

.avatar {
  width: 240px;
  height: 140px;
  display: block;
}


/* CSS */
.button-70 {
  background-image: linear-gradient(#0dccea, #0d70ea);
  border: 0;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, .3) 0 5px 15px;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  font-family: Montserrat, sans-serif;
  font-size: .9em;
  margin: 5px;
  padding: 10px 15px;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
</style>
